<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>手写节流</title>
	</head>
	<body>
		<script>
			// 	节流就是限制一个函数在一段时间内只能执行一次，过了这段时间，在下一段时间又可以执行一次。应用场景如：
			// 输入框的联想，可以限定用户在输入时，只在每两秒钟响应一次联想。
			// 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
			// 表单验证
			// 按钮提交事件。

			function throttle(fn, delay) {
				// 重置定时器
				let timer = null
				// 返回闭包函数
				return function () {
					// 记录事件参数
					let args = arguments
					// 如果定时器为空
					if (!timer) {
						// 开启定时器
						timer = setTimeout(() => {
							// 执行函数
							fn.apply(this, args)
							// 函数执行完毕后重置定时器
							timer = null
						}, delay)
					}
				}
			}
		</script>
	</body>
</html>
